<template>
  <div class="shotbox">
    <div class="title2">
      {{title}}
    </div>
    <div class="photo-list">
      <div class="card-carousel-wrapper">
        <div class="card-carousel--nav__left" @click="moveCarousel(-1)" :disabled="atHeadOfList"></div>
        <div class="card-carousel" :style="{width:carouselWidth + 'px'}">
          <div class="card-carousel--overflow-container">
            <div class="card-carousel-cards" :style="{ transform: 'translateX' + '(' + currentOffset + 'px' + ')'}">
              <div class="card-carousel--card" style="width: 200px;height: 150px;" v-for="item in items" :key="item.title">
                <!-- <img style="width: 100%;" :src="url + item.filePath"> -->
                <video
                  ref="myVideo"
                  :src="url + item.filePath"
                  class="video-div"
                  @click="playVideo(item)"
                ></video>
              </div>
            </div>
          </div>
        </div>
        <div class="card-carousel--nav__right" @click="moveCarousel(1)" :disabled="atEndOfList"></div>
      </div>
    </div>
    <el-dialog  :close-on-click-modal="false"
      width="720px"
      class="video-dialog"
      :visible="dialogVideoVisible"
      :show-close="false"
      @close="closeVideo"
    >
      <video
        ref="video"
        width="100%"
        height="400"
        :src="videoSrc"
        controls
      />
    </el-dialog>
  </div>
</template>
<script>
import {getVideoList} from '@/api/official'
import http from '@/utils/baseUrl'
export default {
  props:{
    pictureText: Object,
    title:String
  },
  mounted () {
    this.getWindowWidth()
    this.getVideo()
  },
  data () {
    return {
      videoSrc:'',
      dialogVideoVisible:false,
      url: http,
      currentOffset: 0,
      windowSize: 5,
      paginationFactor: 220,
      carouselWidth:'200',
      windowWidth: document.documentElement.clientWidth,  //实时屏幕宽度
      items: []
    }
  },
  computed: {
    atEndOfList() {
      return this.currentOffset <= (this.paginationFactor * -1) * (this.items.length - this.windowSize);
    },
    atHeadOfList() {
      return this.currentOffset === 0;
    },
  },
  // <!--在watch中监听实时宽高-->
  watch: {
    windowWidth (val) {
      let that = this;
      if(val<768) {
        this.carouselWidth = '200'
        this.windowSize = 1
      } else {
        this.carouselWidth = '1080'
        this.windowSize = 5
      }
    }
  },
  methods: {
    // playVideo(e) {
    //   console.log(this.$refs.videoDiolag.dialogVisible,'xxx')
    //   this.$refs.videoDiolag.dialogVisible = true
    //   this.videoSrc = this.url + e.filePath
    // },
    playVideo(e) {
          this.videoSrc = this.url + e.filePath
          this.dialogVideoVisible = true
          // 关键一步：在地址更新完后，重新加载视频
          this.$nextTick(() => this.$refs.video.load())
    },
    closeVideo() {
      this.$refs.video.pause()
      this.videoUrl = ''
      this.dialogVideoVisible = false
    },
    // handleClose() {
    //   this.dialogVisible = false
    //   // 关闭弹出框时 视频关闭播放
    //   const video = document.getElementById('video')
    //   video.pause()
    // },
    getVideo() {
      getVideoList().then(res => {
        this.items = res.data.list
      })
    },
    moveCarousel(direction) {
      // Find a more elegant way to express the :style. consider using props to make it truly generic
      if (direction === 1 && !this.atEndOfList) {
        this.currentOffset -= this.paginationFactor;
      } else if (direction === -1 && !this.atHeadOfList) {
        this.currentOffset += this.paginationFactor;
      }
    },
    getWindowWidth() {
      let that = this;
      // <!--把window.onresize事件挂在到mounted函数上-->
      window.onresize = () => {
        return (() => {
          window.fullWidth = document.documentElement.clientWidth;
          that.windowWidth = window.fullWidth; // 宽
        })()
      };
      if(that.windowWidth<768) {
        this.carouselWidth = '200'
        this.windowSize = 1
      } else {
        this.carouselWidth = '1080'
        this.windowSize = 5
      }
    }
  }
}
</script>
<style>
.card-carousel-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}

.card-carousel {
  display: flex;
  justify-content: center;
  /* width: 1080px; */
}
.card-carousel--overflow-container {
  overflow: hidden;
}
.card-carousel--nav__left, .card-carousel--nav__right {
  display: inline-block;
  width: 15px;
  height: 15px;
  padding: 10px;
  box-sizing: border-box;
  border-top: 2px solid #42b883;
  border-right: 2px solid #42b883;
  cursor: pointer;
  margin: 0 10px;
  transition: transform 150ms linear;
}
.card-carousel--nav__left[disabled], .card-carousel--nav__right[disabled] {
  opacity: 0.2;
  border-color: black;
}
.card-carousel--nav__left {
  transform: rotate(-135deg);
}
.card-carousel--nav__left:active {
  transform: rotate(-135deg) scale(0.9);
}
.card-carousel--nav__right {
  transform: rotate(45deg);
}
.card-carousel--nav__right:active {
  transform: rotate(45deg) scale(0.9);
}

.card-carousel-cards {
  display: flex;
  transition: transform 150ms ease-out;
  transform: translatex(0px);
}
.card-carousel-cards .card-carousel--card {
  margin: 0 10px;
  cursor: pointer;
  box-shadow: 0 4px 15px 0 rgba(40, 44, 53, 0.06), 0 2px 2px 0 rgba(40, 44, 53, 0.08);
  background-color: #fff;
  border-radius: 4px;
  z-index: 3;
  margin-bottom: 2px;
}
.card-carousel-cards .card-carousel--card:first-child {
  margin-left: 0;
}
.card-carousel-cards .card-carousel--card:last-child {
  margin-right: 0;
}
.card-carousel-cards .card-carousel--card img {
  vertical-align: bottom;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  transition: opacity 150ms linear;
  user-select: none;
}
.card-carousel-cards .card-carousel--card img:hover {
  opacity: 0.5;
}
.video-div {
  width: 100%;
  height: 100%;
  display: block;
}
.video-dialog {
  background: transparent;
  &::v-deep {
    .el-dialog__header {
      padding: 0;
    }
    .el-dialog__body {
      padding: 0;
    }
  }
}
</style>